﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
		.myClass{
			color:inactivecaption
		}
	</style>
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<table border="1" align="center">
		<tr>
			<th>用户名</th>
			<td>
				<input type="text" value="输入用户名"/>
			</td>
		</tr>
	</table>
	
	<script type="text/javascript">
		//当浏览器加载web页面时
		$(function(){
			//将文本框中的文本样式改变
			$(":text").addClass("myClass");
		});
	</script>
	
	<script type="text/javascript">
		//当光标定位文本框时
		$(":text").focus(function(){
			//清空文本框中的内容
			$(this).val("");
			//删除文本框的样式
			$(this).removeClass("myClass");
		});
	</script>	
	
	<script type="text/javascript">
		//当文本框失去焦点时
		$(":text").blur(function(){
			//获取文本框中填入的内容
			var content = $(this).val();
			//去二边的空格
			content = $.trim(content);
			//如果没填了内容
			if(content.length == 0){
				//在文本框显示提示信息
				$(":text").val("输入用户名");
				//设置文本框中文本的样式
				$(":text").addClass("myClass");
			}	
		});
	</script>
	
  </body>
</html>



